<template>
	<view class="auth-container">
		<view class="auth-card">
			<text class="auth-title">登录</text>

			<view class="input-group">
				<input type="text" class="input-field" placeholder="请输入用户名" v-model="loginForm.username" />

				<input type="password" class="input-field" placeholder="请输入密码" v-model="loginForm.password" />

				<text v-if="loginError" class="error-message">{{ loginError }}</text>
			</view>
			<navigator url="/pages/tabBar/tabcompage/tabcompage" open-type="switchTab">
				<button class="auth-btn" >登录</button>
			</navigator>

			<view class="switch-tip">
				<text>没有账号？</text>
				<text class="switch-link" @click="goToRegister">去注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: ''
				},
				loginError: ''
			}
		},
		methods: {
			handleLogin() {
				this.loginError = '';

				if (!this.loginForm.username || !this.loginForm.password) {
					this.loginError = '请输入用户名和密码';
					return;
				}

				// 这里可以添加实际的登录逻辑
				console.log('登录信息:', this.loginForm);

				uni.showToast({
					title: '登录成功！',
					icon: 'success'
				});
			},
			goToRegister() {
				uni.navigateTo({
					url: '/pages/componnents/Register/Register'
				});
			}
		}
	}
</script>

<style scoped>
	.auth-container {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
		padding: 20px;
	}

	.auth-card {
		width: 100%;
		max-width: 400px;
		background: white;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		padding: 30px;
	}

	.auth-title {
		font-size: 24px;
		color: #333;
		text-align: center;
		margin-bottom: 30px;
		font-weight: 600;
		display: block;
	}

	.input-group {
		margin-bottom: 20px;
	}

	.input-field {
		width: 100%;
		padding: 15px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		font-size: 16px;
		margin-bottom: 15px;
	}

	.input-field:focus {
		outline: none;
		border-color: #007AFF;
	}

	.auth-btn {
		width: 100%;
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 8px;
		padding: 15px;
		font-size: 16px;
		font-weight: 600;
		margin-top: 10px;
	}

	.switch-tip {
		text-align: center;
		margin-top: 20px;
		font-size: 14px;
		color: #666;
	}

	.switch-link {
		color: #007AFF;
		margin-left: 5px;
	}

	.error-message {
		color: #ff3b30;
		font-size: 14px;
		margin-top: 5px;
		text-align: left;
	}
</style>